<template>
  <el-card shadow="always" class="m-2">
    <template #header>
      <div class="flex justify-between">
        <div>
          <div class="flex justify-center items-center gap-1">
            <List theme="outline" size="18" fill="#333" />
            <span>区段列表</span>
          </div>
          <div class="text-xs text-[#888]">{{ proj?.shortName }}</div>
        </div>
        <!-- 新增按钮 -->
        <el-button type="primary" size="default" @click="addZone">
          <Plus theme="outline" size="18" fill="#fff" class="mr-1" />
          新增
        </el-button>
      </div>
    </template>

    <!-- table -->
    <el-table :data="res?.data" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="name" label="名称" width="250" />
      <el-table-column prop="isData" label="数据" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isData ? 'success' : 'danger'" size="small" @close="">
            {{ scope.row.isData ? '有' : '无' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button-group>
            <!-- 导入文件 -->
            <el-button link size="small" @click="addData(scope.row.id)">
              <FileText theme="outline" size="14" fill="#333" />
            </el-button>

            <!-- 查看信息 -->
            <el-button link size="small" @click="lookZone(scope.row)">
              <Data theme="outline" size="14" fill="#333" />
            </el-button>

            <!-- 作业图 -->
            <el-button link size="small" @click="">
              <Pic theme="outline" size="14" fill="#d35400" />
            </el-button>

            <!-- 编辑 -->
            <el-button link size="small" @click="editZone(scope.row)">
              <Editor theme="outline" size="14" fill="#333" />
            </el-button>

            <!-- 删除 -->
            <el-button link size="small" @click="delProj(scope.row)">
              <Delete theme="outline" size="14" fill="#333" />
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt-5"
      @current-change="currentChange"
      v-model:current-page="currentPage"
      :total="res?.meta.total"
      size="small"
      background>
    </el-pagination>
  </el-card>

  <DialogEditZone :visiable="editZoneVisiable" :model="selectZone" @closed="colsed" />
  <DialogAddZone :visiable="addZoneVisiable" :projId="projId" @closed="colsed" />
  <DialogZoneInfo :visiable="zoneInfoVisiable" :zoneId="selectZone?.id" @closed="colsed" />
</template>

<script setup lang="ts">
import useZone from '@/composables/useZone'
import { Data, Delete, Editor, FileText, List, Pic, Plus } from '@icon-park/vue-next'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import DialogEditZone from '@/components/dialog/EditZone.vue'
import DialogAddZone from '@/components/dialog/AddZone.vue'
import DialogZoneInfo from '@/components/dialog/ZoneInfo.vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import useProj from '@/composables/useProj'
import { read } from '@/common/readData'
import type { ZoneModel } from '@/types/model'

const route = useRoute()

const currentPage = ref(1)
const editZoneVisiable = ref(false)
const addZoneVisiable = ref(false)
const zoneInfoVisiable = ref(false)
const selectZone = ref<ZoneModel>()
const projId = ref(+route.params.id)

const { find, proj } = useProj()
const { all, del, update, res } = useZone()

async function colsed() {
  editZoneVisiable.value = false
  addZoneVisiable.value = false
  await all({ projId: +route.params.id, page: currentPage.value })
}

function addZone() {
  addZoneVisiable.value = true
}

async function addData(id: number) {
  await read(id)
  await update(id, { isData: true })
  await all({ projId: +route.params.id, page: currentPage.value })
}

function lookZone(zone: ZoneModel) {
  selectZone.value = zone
  zoneInfoVisiable.value = true
}

function editZone(zone: ZoneModel) {
  selectZone.value = zone
  editZoneVisiable.value = true
}

async function currentChange() {
  await all({ projId: +route.params.id, page: currentPage.value })
}

async function delProj(model: ZoneModel) {
  await ElMessageBox.confirm(`是否删除"${model.name}"区段?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await del(model.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
  await all({ projId: +route.params.id, page: currentPage.value })
}

all({ projId: +route.params.id, page: currentPage.value })
find(+route.params.id)

onBeforeRouteUpdate(async (to) => {
  currentPage.value = 1
  await find(+to.params.id)
  await all({ projId: +to.params.id, page: currentPage.value })
})
</script>
